﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";font-size: 14px;}
        #l-map {height: 80%;width: 100%;}
        #r-result { width: 100%; }

    </style>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZtOic4MnOSLOCAH4WqkeyWuQ"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <title>查询坐标</title>
</head>
<body>
	<div id="l-map"></div>
	<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:250px;" /></div>
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  <div id="txtpoint">
  	<p >经度：<span id="p_lng"></span></p> 
  	<p >维度：<span id="p_lat"></span></p> 
  </div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var marker;
	var map = new BMap.Map("l-map");
	map.centerAndZoom("阿勒泰地区布尔津县神仙湾",15);                   // 初始化地图,设置城市和地图级别。
  map.addEventListener("click",function(e){
   //searchInfoWindow.open(marker);
 setLoacation(e.point);
		//alert(e.point.lng + "," + e.point.lat);
  });

  var firstpoint = new BMap.Point(87.04778, 48.665286);
  setLoacation(firstpoint);
  

	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 18);
			//marker.setPosition(pp);
			//setLoacation(marker);
			//map.addOverlay(marker);    //添加标注
          
          setLoacation(pp);
          
          
          
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}


	var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                   '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                   '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
                 '</div>';

	

	function setLoacation(point){
		G("p_lng").innerHTML=point.lng;
		G("p_lat").innerHTML = point.lat;

	    if (!marker) {
	        marker = new BMap.Marker(point);
	        marker.addEventListener("click", function (e) {
	            //setlocalInfo(e.point);
	            // G("txtpoint").innerHTML=e.point.lng + "," + e.point.lat;
	            //创建检索信息窗口对象
	            var searchInfoWindow = null;
	             content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                  '<p>经度：' + e.point.lng + '</p>'
	             + '<p>维度：' + e.point.lat + '</p>'
             +'</div>';
	            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
	                title: "信息标题xxx",      //标题
	                width: 290,             //宽度
	                height: 105,              //高度
	                panel: "panel",         //检索结果面板
	                enableAutoPan: true,     //自动平移
	                searchTypes: [
                        BMAPLIB_TAB_SEARCH,   //周边检索
                        BMAPLIB_TAB_TO_HERE,  //到这里去
                        BMAPLIB_TAB_FROM_HERE //从这里出发
	                ]
	            });
	            searchInfoWindow.open(marker);
	        });
	        marker.addEventListener("dragend", function (e) {
	            setlocalInfo(e.point);
	            // G("txtpoint").innerHTML=e.point.lng + "," + e.point.lat;
	            //创建检索信息窗口对象
	            var searchInfoWindow = null;
	             content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                 '<p>经度：' + e.point.lng + '</p>'
                + '<p>维度：' + e.point.lat + '</p>'
            + '</div>';
	            searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
	                title: "百度大厦",      //标题
	                width: 290,             //宽度
	                height: 105,              //高度
	                panel: "panel",         //检索结果面板
	                enableAutoPan: true,     //自动平移
	                searchTypes: [
                        BMAPLIB_TAB_SEARCH,   //周边检索
                        BMAPLIB_TAB_TO_HERE,  //到这里去
                        BMAPLIB_TAB_FROM_HERE //从这里出发
	                ]
	            });
	            searchInfoWindow.open(marker);
	        });
	    }

		marker.setPosition(point);
		map.addOverlay(marker);    //添加标注
	    //G("txtpoint").innerHTML=point.lng + "," + point.lat;
		marker.setAnimation(BMAP_ANIMATION_DROP); //跳动的动画
		marker.enableDragging();

	}

	function setlocalInfo(point) {
	    G("p_lng").innerHTML = point.lng;
	    G("p_lat").innerHTML = point.lat;
    }
</script>
